<template>
	<view class="">
		<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
			:short="false" scroll @change="changeTabs"></fui-tabs>

		<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{ height: height + 'px' }">
			<swiper-item v-for="(pageItm, pageidx) in tabs.length" :key="pageidx">
				<view class="padding-all-30">

					<view class="row-center marginTop-50" v-if="WorksList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								暂无作品
							</view>
						</view>
					</view>
					<scroll-view v-else scroll-y :style="{ height: height + 'px' }"
						@scrolltolower="onPullUpLoading(idx)">
						<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
							style="padding: 20rpx 30rpx;position: relative;">
							<view @click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
								<view class="fs-30 bold" v-if="item.WorkName">{{item.WorkName}}</view>
								<view class="fs-26 marginTop-20" style="color: #b7b7b7;letter-spacing: 2rpx;"
									v-if="item.WorkMemo">{{item.WorkMemo}}</view>
								<view v-if="item.WorksUrls && JSON.parse(item.WorksUrls).length != 0"
									class="marginTop-15" style="width: 100%;overflow-x: auto;white-space: nowrap;">
									<image v-for="(j, k) in JSON.parse(item.WorksUrls)" :key="k" :src="j"
										mode="aspectFill" class="words-image marginRight-10 marginTop-10"
										style="width: 200rpx;height:200rpxx;"
										@click.stop="onPreview(JSON.parse(item.WorksUrls), k)">
									</image>
								</view>

								<view style="display: flex;flex-wrap: wrap;" class="marginTop-15">
									<view class="marginRight-15 fs-22 borderR-5"
										style="padding: 8rpx; 14rpx;background-color: #e4e4e4;"
										v-for="(j, k) in item.WorkLabels" :key="k">
										{{j.LabelName}}
									</view>
								</view>
							</view>
							<view class="row-between fs-24 marginTop-20" style="color: #d6d6d6;">
								<view class="row-start">
									<view class="marginRight-20">{{ $common.timeDiff(item.addTime) }}</view>
									<view>阅读 {{item.ReadCount}}</view>
								</view>

								<view class="row-end">
									<view class="" v-if="item.WorkState == 0" style="padding: 5rpx 10rpx;">待审核</view>
									<view class="" v-if="item.WorkState == 1 || item.WorkState == 2"
										style="padding: 5rpx 10rpx;">已通过</view>
									<view class="" v-if="item.WorkState == -1" hover-class="disflex ai-center"
										style="padding: 5rpx 10rpx;color: #ff0000;"
										@click.stop="onPopup(item.AuditReason)"><text>未通过</text> <uni-icons type="info"
											size="18" color="#ff0000"></uni-icons></view>
									<view class="" v-if="item.WorkState == 4" style="padding: 5rpx 10rpx;">已过期</view>
									<view class="row-end marginLeft-10">
										<button class="text-align-center line-height-60 borderR-10 fs-24"
											style="color: #333;width: 120rpx;margin:0;margin-right: 20rpx;"
											@click.stop="onDelete(item,index)">删除</button>
										<button class="text-align-center line-height-60 borderR-10 fs-24"
											style="background-color: #FFDD00;color: #333;width: 120rpx;height: 60rpx;margin:0;"
											@click.stop="onRefresh(item,index)">刷新</button>
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
						<view style="height: 50rpx;"></view>
					</scroll-view>

					<view class="" v-if="WorksList.length != 0" style="height: 100rpx;"></view>

					<fui-dialog :show="refresh.show" :content="refresh.content" :buttons="refresh.buttons" maskClosable
						@click="refreshConfirm" @close="onClose(1)"></fui-dialog>
					<fui-dialog :show="deletes.show" :content="deletes.content" :buttons="deletes.buttons" maskClosable
						@click="deleteConfirm" @close="onClose(2)"></fui-dialog>
				</view>

			</swiper-item>
		</swiper>
		<view class="publicBottom">
			<button class="sub-btn" style="margin-top: 0;"
				@click="$common.goNavPage('/releasePages/pages/worksOrder')">我要发布作品</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						index: 0,
						id: 10000,
						name: '全部'
					},
					{
						index: 1,
						id: 0,
						name: '待审核'
					},
					{
						index: 2,
						id: 2,
						name: '开放中'
					},
					{
						index: 3,
						id: -1,
						name: '未通过审核'
					},
					{
						index: 4,
						id: 4,
						name: '已过期'
					},
				],
				// 刷新弹框
				refresh: {
					content: "",
					show: false,
					buttons: [{
						//按钮文本
						text: '取消',
						//按钮字体颜色，可选
						color: '#333'
					}, {
						text: '刷新',
						color: '#FF9900'
					}]
				},
				// 删除弹框
				deletes: {
					content: "确定要删除吗？",
					show: false,
					buttons: [{
						//按钮文本
						text: '取消',
						//按钮字体颜色，可选
						color: '#333'
					}, {
						text: '删除',
						color: '#FF9900'
					}]
				},
				WorksList: [],
				page: 1,
				more: '',
				tabIndex: 0,
				height: 0,
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(260);
			this.oneLoadData();
		},
		// onReachBottom() {

		// },
		methods: {
			onPullUpLoading() {
				this.page += 1;
				this.loadData();
			},
			onPopup(content) {
				uni.showModal({
					title: '原因',
					content: content ? content : '无',
					showCancel: false,
					confirmText: '关闭'
				})
			},
			// 预览
			onPreview(imageList, index) {
				// console.log('imageList', imageList)
				// return;
				uni.previewImage({
					urls: imageList,
					current: index,
				})
			},
			// onFunction(event) {
			// 	if (event.index == 0)
			// 	if (event.index == 1)
			// },
			// 删除
			onDelete(item, index) {
				uni.showModal({
					title: '确定删除吗？',
					confirmText: '确定删除',
					success: res => {
						if (res.confirm) {
							this.$httpost('/Works/deleteWorks', {
								WorksID: item.WorksID
							}).then(res => {
								uni.showToast({
									title: '删除成功！',
									icon: 'success'
								})
								this.oneLoadData()
							})
						}
					}
				})
			},
			getMyWallet() {
				return new Promise((reslove, reject) => {
					this.$httpost('/UserCenter/myWallet', {}).then(res => {
						// console.log('mywallet', res);
						if (res.code == 200) {
							reslove(res.data.WalletYue)
						}
					});
				})
			},
			// 刷新
			async onRefresh(item, index) {

				const myWallet = await this.getMyWallet();
				// console.log('myWallet', myWallet);

				if (Number(myWallet) < 5) {
					uni.showModal({
						title: '您当前余额不足！',
						confirmText: '去充值',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.$common.goNavPage('/myPages/pages/reCharge')
							}
						}
					})
					return false;
				}

				uni.showModal({
					title: '刷新将会上升您的排名，此次刷新会消耗5个金币',
					confirmText: '确定刷新',
					success: res => {
						if (res.confirm) {
							this.$httpost('/Works/RefreshWorks', {
								WorksID: item.WorksID
							}).then(res => {
								uni.showToast({
									title: '刷新成功！',
									icon: 'success'
								})
								this.oneLoadData()
							})
						}
					}
				})
			},
			oneLoadData() {
				this.$httpost('/UserCenter/myWoks', {
					page: 1
				}).then(res => {
					if (res.code == 200) {
						this.WorksList = res.data.WorksList
					}
				});
			},
			loadData() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myWoks', {
					ListType: this.ListType,
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						if (this.WorksList.length != 0) {
							this.WorksList = [...this.WorksList, ...res.data.WorksList];
							if (res.data.WorksList.length == 0) this.more = '';
						}
					}
				});
			},
			loadDataOne() {
				uni.showLoading({
					title: "加载中"
				})
				this.$httpost('/UserCenter/myWoks', {
					ListType: this.ListType,
					page: 1
				}).then(res => {
					if (res.code == 200) {
						this.WorksList = res.data.WorksList;
						uni.hideLoading()
					}
				});
			},
			changeTabs(e) {
				this.WorksList = [];
				this.page = 1;
				this.ListType = e.id;
				this.tabIndex = e.index;
				this.loadDataOne();
			},
			// 二级tab
			tabChange(event) {
				this.WorksList = [];
				this.page = 1;
				this.tabIndex = event.detail.current;
			},
		}
	}
</script>

<style lang="scss">
	.words-image {
		height: 200rpx;
		border-radius: 10rpx;
	}

	.List {
		background: #FFF;
		padding: 20rpx;
		border-bottom: 1px solid #CCC
	}

	.waterfall {
		padding: 20rpx;
	}

	.waterfall-item {
		width: auto;
		height: auto;
		background: #FFF;
		padding: 15rpx;
		margin-bottom: 20rpx;
		// 	width: calc(33.33% - 20px);
		// 	margin: 0 10px;
		// 	box-sizing: border-box;
		// 	overflow: hidden;
	}

	.waterfall-img {
		width: 100%;
		height: 100%;
	}

	.publicBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 115rpx;
		background-color: #FFF;
		padding-top: 20rpx;
	}
</style>